<template>
    <div class="app">
        <header>
            <div class="center">
                <h3>
                    <b>ToDoList</b>
                    <input type="text" placeholder="请输入todo" @keydown.enter="submit" v-model.trim="con">
                </h3>
            </div>
        </header>
        <main>
            <div class="center">
                <h2>正在进行 <b>{{todo.length}}</b> </h2>
                <ul>
                    <li v-for="(item,index) in todo" :key="item.id">
                        <input type="checkbox" v-model="item.checked" @change="adddone(index)">
                        <p @click="changeEdit(index, true)">
                            <input type="text" v-if="item.showEdit" ref="inp" @blur="changeEdit(index, false)"  v-model="item.con">
                            <span v-else>{{item.con}}</span>
                        </p>
                        <span @click="removetodo(index)">-</span>                        
                    </li>
                </ul>
                <h2>已经完成 <b>{{done.length}}</b></h2>
                <ol>
                    <li v-for="(item,ind) in done" :key="item.id">
                        <input type="checkbox" @change="addtodo(ind)" v-model="item.checked">
                        <p contenteditable="true">{{item.con}}</p>
                        <span @click="removedone(ind)">-</span>                        
                    </li>
                </ol>
                {{todo}}
                {{done}}
            </div>
        </main>
    </div>
</template>

<script>         
    export default {
        data(){
            return {
                con:"",
                todo:JSON.parse(sessionStorage.getItem('todo'))||[],
                done:JSON.parse(sessionStorage.getItem('done'))||[]
            }
        },
        methods:{
            submit(){
                // 输入内容是否为空
                if(!this.con){
                return   alert('请输入正确的todo')
                }
                // 添加到todo中
                this.todo.unshift({
                    id:Date.now(),
                    con:this.con,
                    checked:false,
                    showEdit: false // 是否显示input
                })
                // 添加后清空input框
                this.con=""
            },
            // 删除todo
            removetodo(index){
                this.todo.splice(index,1)
            },
            removedone(ind){
                this.done.splice(ind,1)
            },
            //选中删除添加到done
            adddone(index){
                let[item]=this.todo.splice(index,1)
                this.done.unshift(item)
            },
             //选中删除添加到todo
            addtodo(index){
                let[item]=this.done.splice(index,1)
                this.todo.unshift(item)
            },
            changeEdit(index, flag) {
              this.todo[index].showEdit = flag
              // vue的dom更新时异步的，如果修改数据之后想要操作dom，必须等待页面更新完成之后去操作dom
              // 等待页面更新完成之后执行此函数
              this.$nextTick(() => {
                // 获取dom元素
                const [input] = this.$refs.inp
                if (input) {
                  input.focus() // 获取焦点
                  input.select() // 选中内容
                }
              })
            }
        },
        watch:{
            // 监听todo和done的变化，存到本地
            todo:{
                handler(){
                    sessionStorage.setItem('todo',JSON.stringify(this.todo))
                },
                deep:true
            },
            done:{
                handler(){
                    sessionStorage.setItem("done",JSON.stringify(this.done))
                },
                deep:true
            }
        }
    }
</script>

<style lang="less">
.app{
    display: flex;
    flex-direction: column;
    header{
        width: 100%;
        height: 60px;
        background: #333;
    }
    main{
    flex: 1;
    background: #dddddd;
    }
}
.center{
    height: 100%;
    width: 600px;
    margin: 0 auto;
    h2{
        display: flex;
        justify-content: space-between;
        margin:10px 0px;
        b{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ccc;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }
    }
    h3{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        color: #fff;
        input{
            width: 350px;
            height: 30px;
            border: 0;
            border-radius: 6px;
            padding-left: 10px;
        }
    }
    li {
     width: 100%;
     margin: 10px 0;
     background: #ffffff;
     border-radius: 5px;
     border-left: 5px solid #629A9C;
     padding: 5px 20px;
     display: flex;
     align-items: center;
        p {
           flex: 1;
           margin: 0 15px;
           span{
               width: 100%;
           }
        }
        span{
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #eeee;
            color: #000;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>